<template>
  <div class="login-box">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
    >
      <h2>后台管理系统</h2>
      <el-form-item label="账号：" prop="username">
        <el-input v-model="ruleForm.doctorAccount" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
          v-model="ruleForm.doctorPassword"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="login-btn"
          @click="submitForm(ruleFormRef)"
          >登录
        </el-button>
        <el-button class="login-btn" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { LoginData } from '@/type/login'
import type { ElForm } from 'element-plus'
// import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus'
// import Cookies from "js-cookie";
type FormInstance = InstanceType<typeof ElForm>
type FormRules = InstanceType<typeof ElForm>
import { login } from '@/request/api'
import { useRouter } from 'vue-router'
import user from '@/store'

export default defineComponent({
  setup() {
    const data = reactive(new LoginData())
    const rules = {
      // username: [
      //   { required: true, message: "请输入账号", trigger: "blur" },
      //   { min: 2, max: 10, message: "账号的长度在2-10之间", trigger: "blur" },
      // ],
      // password: [
      //   { required: true, message: "请输入密码", trigger: "blur" },
      //   { min: 3, max: 10, message: "密码的长度在3-10之间", trigger: "blur" },
      // ],
    }

    const ruleFormRef = ref<FormInstance>()
    const router = useRouter()
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.validate((valid: boolean) => {
        console.log(valid)
        if (valid) {
          console.log(valid)
          console.log(data.ruleForm)
          login(data.ruleForm).then((res) => {
            console.log(res)
            //保存token
            // localStorage.setItem("token",res.data.token)
            // 保存个人信息
            if (res.data) {
              //跳转
              // Cookies.set("department",res.data.doctordepartment,{expires:0.3})
              // Cookies.set("name",res.data.doctorname,{expires:0.3})
              console.log(user)
              user.commit('user/updateUser', {
                userName: res.data.doctorname,
                userIdentity: res.data.doctordepartment + '医生',
                PartMent: res.data.doctordepartment,
                doctorRole: res.data.doctorRole,
              })
              // user.mutations.updateUser(user,loginUser)
              // store.state.commit('updateLoginUser', { userName: res.data.doctordepartment });
              router.push('/doctor')
            } else {
              ElMessage.error('不存在该用户')
              console.log('error submit!')
            }
          })
        } else {
          console.log('error submit!')
          // return false;
        }
      })
    }
    //重置
    const resetForm = () => {
      data.ruleForm.doctorAccount = ''
      data.ruleForm.doctorPassword = ''
    }

    return {
      ...toRefs(data),
      rules,
      resetForm,
      ruleFormRef,
      submitForm,
    }
  },
})
</script>
  
  <style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  text-align: center;
  padding: 1px;
  .demo-ruleForm {
    width: 500px;
    margin: 200px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 5px;
  }
  .login-btn {
    width: 48%;
  }
  h2 {
    margin-bottom: 20px;
  }
}
</style>
  